<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script>
    function changeAttribute(){
        var in1 = document.getElementById("in1")
        // 语法：元素.属性名=""
        console.log(in1.type)
        console.log(in1.value)
        // 修改属性值
        in1.type = "button"
        in1.value = "嗨"
    }
    function changeStyle(){
        var in1 = document.getElementById("in1")
        // 元素.style.样式名=""
        in1.style.color = "green"
        in1.style.borderRadius="10px"
    }
    function changeText(){
        var div01 = document.getElementById("div01")
        // div01.innerText = "嗨"
        div01.innerHTML = "<h1>嗨</h1>"
    }
</script>
<style>
    #in1{
        color: red;
    }
</style>
<body>
    <input id="in1" type="text" value="hello">
    <div id="div01">hello</div>
    <hr>
    <button onclick="changeAttribute()">操作属性</button>
    <button onclick="changeStyle()">操作样式</button>
    <button onclick="changeText()">操作文本</button>
    
</body>
</html>